<template>
    <div>

        <div class="flex-center">
            <input type="text" v-model="value" placeholder="请输入验证码" class="input-view" id="text">
            <canvas id="canvas" width="150" height="43" @click="dj" style="border: 1px solid #ccc"></canvas>
        </div>
        <div class="flex-center margin-t20">
            <button @click="dj">换一个</button>
            <button @click="sublim">提交</button>
        </div>


        <template>
            <div>
                <el-button @click="show = !show">Click Me</el-button>
                <div style="display: flex; margin-top: 20px; height: 100px;">
                    <transition name="el-fade-in-linear">
                        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
                    </transition>
                    <transition name="el-fade-in">
                        <div v-show="show" class="transition-box">.el-fade-in</div>
                    </transition>
                </div>
            </div>
        </template>


        <el-button @click="show2 = !show2">Click Me</el-button>

        <div style="display: flex; margin-top: 20px; height: 100px;">
            <div v-show="show2" class="transition-box">.el-zoom-in-center</div>

            <transition name="el-zoom-in-top">
                <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
            </transition>

            <transition name="el-zoom-in-bottom">
                <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
            </transition>
        </div>

        <template>
            <el-card class="TopCard" style="height:50px">
                <!-- 小喇叭 -->
                <i class="el-icon-chat-dot-round" style="color:#606266"/>
                <span class="tips">公告：</span>
                <!-- 滚动文字外层div，文字能展示的区域-->
                <div class="noticeBox"
                     :style="'width:'+noticeWidth+'px;height:20px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px'">
                    <!-- 滚动div，marginLeft变化-->
                    <div :style="'margin-left:'+marginLeft+'px;white-space:nowrap'">
                        <span class="showNotice">{{ showNotice }}</span>
                        <!-- 不会展示，用来测量第二条与第一条重合时的长度 -->
                        <span class="notice">{{ notice }}</span>
                    </div>
                </div>
            </el-card>
        </template>

        <el-button @click="test">测试</el-button>

        <el-row :gutter="10">
            <el-col :span="6">10</el-col>
        </el-row>

        <div>
            <el-button style="width: 500px;margin: 50px" size="medium" type="primary" @click="loadCommentList">测试
            </el-button>
        </div>

        <!--        评论区     -->
        <el-card style="height: 440px; overflow-y: auto;">

            <div v-if="commentList.length <= 0">
                <el-empty :image-size="200"></el-empty>
            </div>
            <div class="box-card" v-for="(comment,index) in commentList" :key="index">

                <!--     根评论       -->

                <el-row>
                    <el-col :span="1">
                        <!--  用户头像  -->
                        <el-col :span="1">
                            <div class="block">
                                <el-avatar :size="50" :src="comment.user.avatar"></el-avatar>
                            </div>
                        </el-col>
                    </el-col>
                    <el-col :span="23">
                        <el-row>
                            <!--  用户昵称  -->
                            <el-col :span="2">
                                <span>{{ comment.user.name }}</span>
                            </el-col>
                            <!--  评论时间  -->
                            <el-col :span="21">
                                <span style="color: #99a9bf">{{ comment.createTime }}</span>
                            </el-col>
                            <!--  操作  -->
                            <el-col :span="1">
                                <el-link v-if="comment?.userId === parseInt(userId)"
                                         @click="deleteComment(comment)">
                                    删除
                                </el-link>
                                <el-link v-if="comment?.userId !== parseInt(userId)"
                                         @click="replyComment(comment)">回复
                                </el-link>
                            </el-col>
                        </el-row>

                        <el-row>
                            <!--  评论内容  -->
                            <span style="font-size: 15px">{{ comment.content }}</span>
                        </el-row>
                    </el-col>
                </el-row>


                <!--     子评论       -->
                <div style="margin-left: 80px">
                    <!--     递归实现子评论的展示      -->
                    <childComment :list="comment.child" :parentName="comment.user.name" :currentUserId="userId"
                                  @data="handleMessageFromChild"/>
                </div>


            </div>

        </el-card>
        <el-card>
            <el-row>
                <el-col :span="22">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="textarea"
                            maxlength="50"
                            show-word-limit
                    >
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button v-if="parentId !== ''" type="primary" size="medium" @click="sendComment">回复</el-button>
                    <el-link v-if="parentId !== ''" type="info" size="medium" @click="cancelComment">取消回复
                    </el-link>
                    <el-button v-if="parentId === ''" type="success" size="medium" @click="sendComment">发送</el-button>
                </el-col>
            </el-row>
        </el-card>


        <!--

                &lt;!&ndash;        评论区     &ndash;&gt;
                <el-card class="box-card">
                    &lt;!&ndash;     根评论       &ndash;&gt;

                    <el-row>
                        <el-col :span="1">
                            &lt;!&ndash;  用户头像  &ndash;&gt;
                            <el-col :span="1">
                                <div class="block">
                                    <el-avatar :size="50" :src="circleUrl"></el-avatar>
                                </div>
                            </el-col>
                        </el-col>
                        <el-col :span="23">
                            <el-row>
                                &lt;!&ndash;  用户昵称  &ndash;&gt;
                                <el-col :span="2">
                                    <span>zhangsan</span>
                                </el-col>
                                &lt;!&ndash;  评论时间  &ndash;&gt;
                                <el-col :span="19">
                                    <span>2022-10-05 06:20:15</span>
                                </el-col>
                                &lt;!&ndash;  操作  &ndash;&gt;
                                <el-col :span="1">
                                    <el-link>删除</el-link>
                                </el-col>
                                <el-col :span="1">
                                    <el-link>回复</el-link>
                                </el-col>
                            </el-row>

                            <el-row>
                                &lt;!&ndash;  评论内容  &ndash;&gt;
                                <span style="font-size: 15px">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</span>
                            </el-row>
                        </el-col>
                    </el-row>


                    &lt;!&ndash;     子评论       &ndash;&gt;
                    <div style="margin-left: 80px">


                        <el-row v-for="item in 2" :key="item">
                            <el-col :span="1">
                                &lt;!&ndash;  用户头像  &ndash;&gt;
                                <el-col :span="1">
                                    <div class="block">
                                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
                                    </div>
                                </el-col>
                            </el-col>
                            <el-col :span="23">
                                <el-row>
                                    &lt;!&ndash;  子评论用户昵称  &ndash;&gt;
                                    <el-col :span="2">
                                        <span>lisi</span>
                                    </el-col>

                                    &lt;!&ndash;  回复  &ndash;&gt;
                                    <el-col :span="2">
                                        <span>回复</span>
                                    </el-col>

                                    &lt;!&ndash;  根评论用户昵称  &ndash;&gt;
                                    <el-col :span="2">
                                        <span style="color: #99a9bf">zhangsan</span>
                                    </el-col>
                                    &lt;!&ndash;  评论时间  &ndash;&gt;
                                    <el-col :span="15">
                                        <span>2022-10-05 06:20:15</span>
                                    </el-col>
                                    &lt;!&ndash;  操作  &ndash;&gt;
                                    <el-col :span="1">
                                        <el-link>删除</el-link>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-link>回复</el-link>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    &lt;!&ndash;  回复内容  &ndash;&gt;
                                    <span style="font-size: 15px">回复内容回复内容回复内容回复内容回复内容</span>
                                </el-row>
                            </el-col>
                        </el-row>

                    </div>

                </el-card>

        -->

        <div style="margin-top: 100vh">


            <el-container>


                <!--            侧边栏-->
                <el-aside style="width: 200px;min-height: 100vh;">


                    <div style="height: 60px; line-height: 60px; background: #001529;display: flex;align-content: center;justify-content: center">
                        <img src="../assets/logo1.png" alt="LOGO" width="40" height="40" style="margin: 10px 10px">
                        <span style="color: white;font-size: 18px">Honey2024</span>
                    </div>


                    <el-menu router style="border: none;background: #001529" :default-active="$route.path">
                        <!--                    default-active   用来  高亮  当前页面   的   侧边栏选项                -->


                        <el-menu-item index="/">
                            <template>
                                <i class="el-icon-house"></i>
                                <span>系统首页</span>
                            </template>
                        </el-menu-item>


                        <el-menu-item index="/element">
                            <template>
                                <i class="el-icon-collection"></i>
                                <span>Element页面</span>
                            </template>
                        </el-menu-item>


                        <el-submenu index="">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>信息管理</span>
                            </template>
                            <el-menu-item>
                                <template>
                                    <i class="el-icon-user"></i>
                                    <span>用户信息</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item>
                                <template>
                                    <i class="el-icon-s-custom"></i>
                                    <span>商家信息</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item>
                                <template>
                                    <i class="el-icon-goods"></i>
                                    <span>商品信息</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item>
                                <template>
                                    <i class="el-icon-tickets"></i>
                                    <span>商品分类信息</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item>
                                <template>
                                    <i class="el-icon-s-order"></i>
                                    <span>订单信息</span>
                                </template>
                            </el-menu-item>


                        </el-submenu>


                    </el-menu>


                </el-aside>


                <el-container>


                    <!--                顶部-->
                    <el-header>
                        顶部
                    </el-header>


                    <!--                主体内容-->
                    <el-main>
                        主体内容
                    </el-main>


                </el-container>


            </el-container>

            <!--            <el-row>
                            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        </el-row>-->


            <!--  每一行分为24等份，列用span属性来占比一行的比例-->
            <el-row :gutter="20">
                <!--          gutter用来设置每一列的中间间隔-->
                <!--         span的数值为占24等份的多少份-->
                <el-col :span="6">
                    <div style="width: auto;height: 300px;background: #99a9bf;padding: 40px;border-radius: 5px;margin: 50px"></div>
                </el-col>
                <el-col :span="6">
                    <div style="width: auto;height: 300px;background: #99a9bf;padding: 40px;border-radius: 5px;margin: 50px"></div>
                </el-col>
                <el-col :span="6">
                    <div style="width: auto;height: 300px;background: #99a9bf;padding: 40px;border-radius: 5px;margin: 50px"></div>
                </el-col>
                <el-col :span="6">
                    <div style="width: auto;height: 300px;background: #99a9bf;padding: 40px;border-radius: 5px;margin: 50px"></div>
                </el-col>
            </el-row>

            <!--      普通模式    type属性-->
            <div style="margin-top: 20px">
                <el-button>白底黑字</el-button>
                <el-button type="primary">蓝底白字</el-button>
                <el-button type="danger">红底白字</el-button>
                <el-button type="info">灰底白字</el-button>
                <el-button type="success">绿底白字</el-button>
                <el-button type="warning">黄底白字</el-button>
            </div>

            <!--      朴素模式   plain属性 -->
            <div style="margin-top: 20px">
                <el-button>白底黑字</el-button>
                <el-button type="primary" plain>蓝底白字</el-button>
                <el-button type="danger" plain>红底白字</el-button>
                <el-button type="info" plain>灰底白字</el-button>
                <el-button type="success" plain>绿底白字</el-button>
                <el-button type="warning" plain>黄底白字</el-button>
            </div>

            <!--      圆角模式    round属性-->
            <div style="margin-top: 20px">
                <el-button round>白底黑字</el-button>
                <el-button type="primary" round>蓝底白字</el-button>
                <el-button type="danger" round>红底白字</el-button>
                <el-button type="info" round>灰底白字</el-button>
                <el-button type="success" round>绿底白字</el-button>
                <el-button type="warning" round>黄底白字</el-button>
            </div>

            <!--      圆形模式    circle属性-->
            <div style="margin-top: 20px">
                <el-button icon="el-icon-search" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </div>


            <!--      搜索框-->
            <el-row :gutter="10" style="margin-top: 20px">
                <el-col :span="4">
                    <el-input v-model="value1" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input show-password v-model="password" placeholder="请输入密码"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input clearable v-model="value2" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input prefix-icon="el-icon-search" v-model="value3" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input suffix-icon="el-icon-user" v-model="value3" placeholder="请输入内容"></el-input>
                </el-col>

                <el-col :span="4">
                    <el-autocomplete v-model="value4" :fetch-suggestions="querySearch"
                                     placeholder="请输入内容" :trigger-on-focus="false"></el-autocomplete>
                </el-col>


            </el-row>

            <!--      拿来即用的搜索框和搜索按钮   -->
            <el-row>
                <!--          带输入建议的搜索框-->
                <el-col>
                    <el-autocomplete style="width: 245px" prefix-icon="el-icon-search" clearable v-model="value"
                                     :fetch-suggestions="querySearch"
                                     placeholder="请输入内容" :trigger-on-focus="false"></el-autocomplete>
                    <el-button style="margin-left: 5px;width: 70px;font-size: 13px" type="primary">搜索</el-button>
                </el-col>

                <!--      普通的输入框-->
                <el-col>
                    <el-input style="width: 200px;margin-top: 10px" clearable v-model="value"
                              placeholder="请输入内容"></el-input>
                </el-col>
                <el-col>
                    <el-input style="width: 200px;margin-top: 10px" clearable show-password v-model="password"
                              placeholder="请输入密码"></el-input>
                </el-col>
            </el-row>


            <!--      下拉框-->
            <el-select v-model="select1" placeholder="选择爱好" @change="selectChange" clearable multiple filterable>
                <!--
                clearable : 可清空选项按钮
                multiple : 开启多选模式
                filterable : 开启可搜索模式，但是在数组中的对象中，要有label作为一个key
                -->
                <el-option
                        v-for="item in hobby"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                </el-option>
                <!--  v-for是for循环遍历数组
                      :key绑定唯一属性，
                      :label绑定页面展示的选项内容
                      :value绑定与选项相匹配的相关数据，可以是本身，也是可以是其他数据
                -->
            </el-select>

            <!--      单选框-->
            <el-radio-group v-model="radio1" @change="radioChange">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>

            <!--      多选框-->
            <el-checkbox-group v-model="checkbox1" @change="checkboxChange">
                <el-checkbox label="复选框A"></el-checkbox>
                <el-checkbox label="复选框B"></el-checkbox>
            </el-checkbox-group>

            <!--  时间框-->
            <!--      选择日期：年-月-日-->
            <el-date-picker
                    v-model="date"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="dateChange"
            >
            </el-date-picker>

            <!--      选择时间：-年-月-日 时：分：秒-->
            <el-date-picker v-model="datetime"
                            type="datetime"
                            placeholder="选择时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="datetimeChange"
            >
            </el-date-picker>

            <!--      选择时间：-年-月-日  ------  -年-月-日   -->
            <el-date-picker v-model="daterange"
                            type="daterange"
                            placeholder="选择日期段"
                            value-format="yyyy-MM-dd"
                            @change="daterangeChange"
            >
            </el-date-picker>

            <div>
                <el-table :data="tableData" border :header-cell-style="{background: 'aliceblue',fontSize: '16px'}">
                    <el-table-column label="序号" type="index" align="center"></el-table-column>
                    <el-table-column label="id" prop="id" align="center"></el-table-column>
                    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
                    <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                    <el-table-column label="地址" prop="address" align="center"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


        </div>
    </div>


</template>


<style>
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
}


.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

/* 公告card */
.TopCard .el-card__body {
    padding: 0px 10px
}

/* 公告title */
.tips {
    line-height: 50px;
    color: #606266;
    font-weight: bold
}

.input-view {
    height: 43px;
    width: 220px;
    font-size: 20px;
    border: 1px solid #999;
    font-size: 16px;
    padding: 0 10px;
}

.flex-center {
    display: flex;
    align-items: center;
}

.margin-t20 {
    margin-top: 15px;
}

button {
    background: transparent;
    border: 1px solid #0440b6;
    color: #0440b6;
    margin-right: 10px;
}

</style>

<script>
import childComment from "./childComment.vue"; // fade/zoom
import 'element-ui/lib/theme-chalk/base.css'

export default {
    components: {
        childComment
    },
    data() {
        return {
            show_num: [],

            show2: true,
            show: true,
            // 适应屏幕分辨率
            noticeWidth: window.screen.width - 150,
            // 公告展示（过长时会重复两遍）
            showNotice: '',
            // 用于公告过长时，获取重复两遍中第一遍的长度
            notice: '',
            // 公告初始位置
            marginLeft: 100,

            currentTabList: [],
            textarea: '',
            userId: '1',
            productId: '1',
            parentId: '',  //  parent_id
            rootParentId: '',  //  root_parent_id
            commentList: [],
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",


            value: '',
            value1: '',
            password: '',
            value2: '',
            value3: '',
            value4: '',
            fruits: [
                {value: '1西瓜'},
                {value: '2苹果'},
                {value: '3香蕉'},
                {value: '1安其拉'},
                {value: '2菜瓜'},
                {value: '3黄瓜'},
                {value: '3西红柿'},
                {value: '2番茄'},
                {value: '1土豆'},
                {value: '2电脑'},
                {value: '2手机'},
                {value: '1华为'},
                {value: '1苹果手机'},
                {value: '3阿拉'}
            ],
            select1: '',
            hobby: [
                {label: '乒乓球', id: '001'},
                {label: '篮球', id: '002'},
                {label: '排球', id: '003'},
                {label: '羽毛球', id: '009'},
                {label: '何球', id: '004'},
                {label: 'CF', id: '005'},
                {label: 'CSDN', id: '006'},
                {label: 'CF穿越火线', id: '007'},
                {label: 'CSGO', id: '008'},
            ],
            radio1: '',
            checkbox1: [],
            date: '',
            datetime: '',
            daterange: '',
            tableData: [
                {name: '张三', age: 18, id: 1, address: '山西省太原市尖草坪区南寨街道大同路333号'},
                {name: '里斯', age: 17, id: 2, address: '山西省太原市尖草坪区南寨街道大同路334号'},
                {name: '王五', age: 88, id: 3, address: '山西省太原市尖草坪区南寨街道大同路335号'},
                {name: '在的', age: 55, id: 4, address: '山西省太原市尖草坪区南寨街道大同路336号'},
                {name: '阿达的的', age: 74, id: 5, address: '山西省太原市尖草坪区南寨街道大同路337号'},
                {name: '里碎碎念', age: 25, id: 6, address: '山西省太原市尖草坪区南寨街道大同路338号'},
            ]

        }
    },
    mounted() {
        // this.$request.get('/systemNotice/latest').then(res => {
        //     if (res.code === '200') {
        //         this.currentTabList = res.data
        //         console.log(res.data)
        //
        //         // 遍历公告，截取每条公告的标题和内容，用冒号：连接，存入noticeData数组中
        //
        //         this.noticeData = []
        //         this.currentTabList.forEach(item => {
        //             let notice = item.title + ':' + item.content
        //             this.noticeData.push(notice)
        //         })
        //         console.log(this.noticeData)
        //
        //
        //         // 公告滚动
        //         this.noticeData.forEach((val, index) => {
        //             if (index === 0) {
        //                 this.showNotice += '【' + (index + 1) + '】' + val
        //             } else {
        //                 this.showNotice += '\xa0\xa0\xa0\xa0\xa0\xa0【' + (index + 1) + '】' + val
        //             }
        //         })
        //         // 公告上面先赋值，再获取宽度
        //         setTimeout(() => {
        //             // 公告div长度
        //             var oneNoticeWidth = document.getElementsByClassName('showNotice')[0].offsetWidth
        //             // 公告外层div长度
        //             var noticeBoxWidth = document.getElementsByClassName('noticeBox')[0].offsetWidth
        //             // 一条公告长度太大时，才滚动
        //             if (oneNoticeWidth > noticeBoxWidth) {
        //                 // 滚动公告需要将公告重复两遍进行滚动，两遍中间需要加空格
        //                 this.notice = this.showNotice + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
        //                 // 上面先赋值，再获取宽度
        //                 setTimeout(() => {
        //                     // 获取一遍加中间空格的长度，即左移时第二遍与第一遍完全重合时的长度
        //                     var oneNoticeAddEmptyWidth = document.getElementsByClassName('notice')[0].offsetWidth
        //                     // 公告内容重复两遍
        //                     this.showNotice = this.notice + this.showNotice
        //                     this.timer = setInterval(() => {
        //                         this.marginLeft -= 1
        //                         // 第二遍与第一遍起始位置重合时（第一条已完全移到左侧隐藏），marginLeft置0，即回到第一条
        //                         if (this.marginLeft === (-1) * oneNoticeAddEmptyWidth) {
        //                             this.marginLeft = 0
        //                         }
        //                     }, 20)
        //                 }, 10)
        //             } else { //公告并没有很长时不滚动
        //                 this.marginLeft = 0
        //             }
        //         }, 10)
        //
        //     } else {
        //         console.log(res.msg)
        //     }
        // })
        this.noticeData = ['公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一', '公告二']

        this.show_num = [];
        this.draw();


    },
    methods: {

        sublim() {
            let [num1 = 0, type, num2 = 0] = this.show_num || [];
            let NUM_MAP = {
                '+': num1 + num2,
                '-': num1 - num2,
                '*': num1 * num2
            }
            if (!this.value) return alert('请输入验证码！');
            if (this.value == NUM_MAP[type]) {
                alert('提交成功！');
                this.dj()
            } else {
                alert('验证码错误！\n你输入的是:  ' + this.value + "\n正确的是:  " + NUM_MAP[type] + '\n请重新输入！');
                this.dj()
            }
        },
        // 随机颜色
        randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        },
        // 绘制干扰（线条，原点）
        drawLine(context, canvas_width, canvas_height) {
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = this.randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = this.randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        },
        // 绘制单个字符
        drawStr(context, txt, x) {
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标（20+0到8的随机数）
            context.font = "bold 23px 微软雅黑";

            context.fillStyle = this.randomColor(); // 随机生成一个颜色
            context.fillText(txt, x, y);
            return x + 10 + context.measureText(txt).width; //宽度
        },
        drawNum(context, randomList, currentWidth) {
            var j = Math.floor(Math.random() * randomList.length);//获取到随机的索引值 Math.floor(Math.random()*(max-min+1)+min);
            var txt = randomList[j];//得到随机的一个内容
            this.show_num.push(txt);
            return this.drawStr(context, txt, currentWidth);
        },
        draw(codeLength = 3) { // codeLength: 设置验证码长度
            let canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            let context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            let canvas_width = canvas.width;
            let canvas_height = canvas.height;
            context.clearRect(0, 0, canvas_width, canvas_height);

            this.show_num = [];
            let currentWidth = 0;
            // 数字一
            currentWidth = this.drawNum(context, new Array(100).fill(null).map((v, i) => i), currentWidth);
            // 运算类型
            currentWidth = this.drawNum(context, ['+', '-', '*'], currentWidth);
            // 数字二
            currentWidth = this.drawNum(context, new Array(10).fill(null).map((v, i) => i), currentWidth);
            // 绘制= ?
            this.drawStr(context, '= ?', currentWidth)
            // 一些干扰因素（线条，原点）
            this.drawLine(context, canvas_width, canvas_height);
        },

        dj() {
            this.value = ''
            this.draw();
        },


        test() {
            let obj = {}
            let blockedWord = {
                word: '兼职',
            }
            obj.blockedWord = blockedWord
            // obj.currentPage = 1
            // obj.pageSize = 5
            this.$request.post('/blockedWord/getByManyConditionInPage', obj).then(res => {
                console.log(res)
            })
        },


        // 发送评论
        sendComment() {
            // 评论内容         从输入框获取
            // 用户id          从本地获取
            // 发布时间         后端生成
            // is_delete        0
            // productId       从return获取商品id
            // 父评论id        父评论就是从点击回复里面获取的      如果存在，那么就在return中
            // 根评论id        从 父评论 中获取 根评论id         如果存在，那么就在return中

            if (this.userId === null || this.userId === '' || this.userId === undefined) {
                this.$message.info('请先登录')
                this.$router.push('/login')
                return
            }
            if (this.productId === null || this.productId === '' || this.productId === undefined) {
                this.$message.info('商品不存在')
                this.$router.go(-1)
            }

            let comment = {}
            comment.content = this.textarea
            comment.userId = this.userId
            comment.isDelete = 0
            comment.productId = this.productId
            comment.parentId = this.parentId
            comment.rootParentId = this.rootParentId
            console.log(comment);
            this.$request.post('/comment/add', comment).then(res => {
                if (res.code === '200') {
                    this.$message.success('评论成功')
                    this.loadCommentList()
                    this.textarea = ''
                    this.cancelComment()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 子组件返回值
        handleMessageFromChild(data) {
            console.log('父组件接收到数据：' + data)
            console.log(data);
            this.parentId = data.parentId
            this.rootParentId = data.rootParentId
        },
        // 回复设置
        replyComment(comment) {
            this.parentId = comment.id
            this.rootParentId = comment.rootParentId
            console.log(this.parentId)
            console.log(this.rootParentId)
        },
        // 取消回复
        cancelComment() {
            this.parentId = ''
            this.rootParentId = ''
            console.log(this.parentId)
            console.log(this.rootParentId)
        },
        // 删除评论
        deleteComment(comment) {
            // 直接删除这个评论就行，实体类
            console.log(comment)
            this.$request.post('/comment/delete', comment).then(res => {
                if (res.code === '200') {
                    this.$message.success('删除成功')
                    this.loadCommentList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 测试
        loadCommentList() {
            this.$request.get('/comment/list' + '?productId=1').then(res => {
                if (res.code == '200') {
                    this.commentList = res.data.commentList
                    console.log(this.commentList)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        // 搜索框动态提示方法
        querySearch(query, cb) {
            let result = query ? this.fruits.filter(v => v.value.includes(query)) : this.fruits;
            cb(result);
        },
        // 下拉框值变化时的方法
        selectChange() {
            console.log(this.select1)
        },
        // 单选框值改变时的方法
        radioChange() {
            alert(this.radio1)
        },
        // 复选框值变化时的方法
        checkboxChange() {
            console.log(this.checkbox1)
        },
        // date日期改变时的方法
        dateChange() {
            console.log(this.date)
        },
        // datetime改变时的方法
        datetimeChange() {
            console.log(this.datetime)
        },
        // daterange改变时的方法
        daterangeChange() {
            console.log(this.daterange)
        },
        edit(row) {
            // alert(row.name)
            // this.$message.success(row.name)
            // this.$message.warning(row.name)
            // this.$notify.success(row.name)

            this.$confirm('这是什么个玩意儿？', '提示', {
                type: 'warning'
            }).then(res => {
                this.$message.success("ok 我点击了确认")
            }).catch(() => {
                this.$message.warning("ok 我点击了取消")
            })
        }
    }
}

</script>

